<template>
  <div class="detail">
    <div slot="content">
      <div class="title g-mt10">
        <h3>{{ newDetail.title }}</h3>
        <i class="bottom-line"></i>
      </div>

      <div class="dcc">
        {{ newDetail.content }}
      </div>

      <div class="more">
        <p class="prev" @click="prevNew">
          上一篇
          <span>&&&&&&&&&&&&文章</span>
        </p>

        <p class="next" @click="nextNew">
          上一篇
          <span>&&&&&&&&&&&&文章</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Side from 'components/side/side'
  import Loading from 'base/loading/loading'
  import IContent from 'base/content/content'
  import axios from 'axios'
  import {ERR_OK} from 'api/config'
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        newDetail: {
          title: '',
          content: ''
        }
      }
    },
    computed: {
      ...mapGetters([
        'newId'
      ])
    },
    created() {
      setTimeout(() => {
        this._getNewData(this.$store.state.newId.id)
      })
    },
    methods: {
      _getNewData(newId) {
        setTimeout(() => {

          console.log("根据newId {"+newId+"} 的变化获取newId对应新闻详细信息")

          axios.get('/api/getIndexData', {newId: newId}).then(res => {
            if (res.data.code === ERR_OK) {
              let data = res.data.data
              this.newDetail = data.newDetail
            }
          })
        })
      },
      prevNew() {
        let newId = this.newDetail.prevNew
        this.$router.push({path: `/${this.$route.params.columnName}/${this.$route.params.id}/${newId}`})
      },
      nextNew() {
        let newId = this.newDetail.nextNew
        this.$router.push({path: `/${this.$route.params.columnName}/${this.$route.params.id}/${newId}`})
      },
    },
    components: {
      Side,
      Loading,
      IContent
    },
    watch: {
      $route(to, form){
        if(to.params.newId){
          this._getNewData(to.params.newId)
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .detail
    ltp(0, 34px)
    bottom: 0px
    right: 0
    z-index: 10
    background-color: #fff
    .title
      position: relative
      hh(40px)
      padding-bottom: 11px
      sc($font-medium-x, $vice-color)
      i.bottom-line
        lbp(50%, 3px)
        width: 100px
        height: 5px
        margin-left: -50px
        background-color: $vice-color
      h3
        hh(40px)
        text-align: center
    .dcc
      padding: 10px
      sc(13px, $back)
      line-height: 24px
      p
        text-indent: 20px
    .more
      lbp(10px, 10px)
      right: 10px
      p
        hh(20px)
        no-wrap()
        &.next
          margin-top: 5px
        span
          padding-left: 10px
          color: $vice-color
          &:hover
            text-decoration: underline
</style>
